<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24" style="text-align: right;margin-left: -10px;">
				<el-button type="primary" size="small" @click='quesItemAdd' v-if="curentitemid">新增</el-button>
				<el-button type="primary" size="small" @click.native.prevent="quesItemEdit" v-if="curentitemid">编辑</el-button>
				<el-button type="primary" size="small" @click.native.prevent="startquesItem" v-if="curentitemid">启用</el-button>
				<el-button type="primary" size="small" @click.native.prevent="stopquesItem" v-if="curentitemid">停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18">
				<el-table ref="multipleTable" :data="tableData.dataList" @selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="itemName" label="项目名称">
					</el-table-column>
					<el-table-column prop="countType" label="评分方式" :formatter="scoreFormates">
					</el-table-column>
					<el-table-column prop="countValue" label="评分值" :formatter="scoreValue">
					</el-table-column>
					<el-table-column prop="score" label="得分">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="timeFormates">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogform" title="新增对应">
			<el-form :model="dataFormModelData" label-width="120px" ref="datamodelForm" :rules="modelRule">
				<el-form-item label="项目名称:" prop="itemName">
					<el-input size="small" v-model="dataFormModelData.itemName" readonly placeholder="项目名称"></el-input>
				</el-form-item>
				<el-form-item label="评分方式:" prop="countType">
					<el-select size="small" v-model="dataFormModelData.countType" placeholder="评分方式:">
						<el-option v-for="item in countTypeArr" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
	
				<el-form-item label="评分区间开始值:" prop="start" v-if="dataFormModelData.countType">
					<el-input-number v-model="dataFormModelData.start" :min="1" :max="999999" :step="0.1"></el-input-number>
				</el-form-item>
				<el-form-item label="评分区间结束值:" prop="stop" v-if="dataFormModelData.countType">
					<el-input-number v-model="dataFormModelData.stop" :min="1" :max="999999" :step="0.1"></el-input-number>
				</el-form-item>
				<el-form-item label="得分:" prop="scorepro" label-width="120px" required>
					<el-input-number v-model="dataFormModelData.score" :min="1" :max="999999" :step="0.1"></el-input-number>
					<!--<el-input size="small" v-model="dataFormModelData.score" placeholder="得分(请填写合适的数字)"></el-input>-->
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="quesItemsave">提交</el-button>
				<el-button @click="dialogform = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			typeCovert: {
				"02030501": "等于",
				"02030502": "大于",
				"02030503": "小于",
				"02030504": "大于等于",
				"02030505": "小于等于",
				"02030506": "在区间"
			},
			//问题项的弹框
			dialogform: false,
			//页码数
			CurentPage: 1,
			page: this.page,
			//问题项分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//问题项表单初始值
			emptyData: {
				id: '',
				itemId: '',
				itemCode: '', //项编码
				itemName: '', //项名称
				countType: '02030506', //评分方式
				start: '', //评分开始值
				stop: '',//评分区间结束值
				score: '1', //得分
				status: '1',
			},
			//问题项表单数据
			dataFormModelData: {
				id: '',
				itemId: '',
				itemCode: '', //项编码
				itemName: '', //项名称
				countType: '02030506', //评分方式
				start: '', //评分开始值
				stop: '',//评分区间结束值
				score: '', //得分
				status: '1',
			},
			countTypeArr: [], //“评分方式”数组
			paramTreeData: [], //树性数据
			curentitemid: '', //点击树形结构的id
			curentitemName: '', //点击树形结构的itemName
			//树型数据配置
			defaultProps: {
				label: 'itemName'
			},
			curentPCode: "", //此刻点击的树的groupCode
			//问题项校验规则：
			modelRule: {
				itemCode: [{
					required: true,
					message: '请输入项编号',
					trigger: 'blur'
				}],
				itemName: [{
					required: true,
					message: '请输入项名称',
					trigger: 'blur'
				}],
				countType: [{
					required: true,
					message: '请选择评分方式',
					trigger: 'blur'
				}],
			},
			inputsearch: "",
			formLabelWidth: '120px',
			//问题项复选框
			selectarr: [],
			//问问题项复选框选择值
			selectvalue: '',
			areaselectName: '',
			//问题项选择对应的itemType
			seleitemType: '', //"0203030101"单选   "0203030102"多选
			areaid: ''
		}
	},
	methods: {
		handleCurrentChange: function (currentPage) {

			this.$data.CurentPage = currentPage;
			this.quesItemquery();
		},
		//点击资源树节点
		handleNodeClick(data) {

			this.$data.curentitemid = data.id;
			this.$data.curentitemName = data.itemName;

			//问题项
			this.$data.emptyData.itemId = data.id;
			this.$data.emptyData.itemName = data.itemName;
			this.$data.emptyData.itemCode = data.itemCode;
			this.quesItemquery();
		},
		//问题查询
		quesItemquery: function () {
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/bc/custome/itemscore/list', //url
				params: { //发送的参数
					id: this.$data.curentitemid,
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {

				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;
				for (var i = 0; i < resp.data.dataList.length; i++) {
					this.tableData.dataList[i].itemName = this.curentitemName;
				}
			}, function (error) {
				// error
			})

		},

		//问题新增
		quesItemAdd: function () {
			this.$data.dataFormModelData = Object.assign(this.$data.dataFormModelData, this.$data.emptyData);
			this.$data.dialogform = true;
		},
		//问题保存
		quesItemsave: function () {
			this.$refs.datamodelForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/bc/custome/itemscore/save', this.$data.dataFormModelData)
						.then(resp => {

							if (resp.data.success) {

								this.$message(resp.data.msg);
								this.quesItemquery();
								this.$data.dialogform = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//问题编辑
		quesItemEdit: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/bc/custome/itemscore/info', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$data.dialogform = true;
					this.$data.dataFormModelData = resp.data.data;
					this.$data.dataFormModelData.itemName = this.$data.curentitemName;
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//问题启用
		startquesItem: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/bc/custome/itemscore/start', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesItemquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//问题停用
		stopquesItem: function () {
			if (this.$data.selectarr.length == 1) {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/bc/custome/itemscore/stop', //url
					params: { //发送的参数
						id: this.$data.selectarr[0].id, //查询条件
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.quesItemquery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}
		},
		//问题项复选框
		handleSelectionChange: function (value) {

			this.$data.selectarr = value;
			if (this.$data.selectarr.length > 1) {
				this.$message.error("请选择一条数据")
			}
		},
		//查询参数树
		queryParamTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/bc/custome/itemscore/leftTree', {}).then((response) => {

				this.$data.paramTreeData = response.data.dataList;
			}, (response) => { });
		},

		timeFormates: function (row, column) {
			if (row.status == 1) return "已启用";
			return "已停用";
		},
		scoreFormates: function (row, column) {//评分方式转换
			return this.$data.typeCovert[row.countType];
		},
		scoreValue: function (row, column) {//评分值转换
			return '[' + row.start + ' - ' + row.stop + ']';
		}
	},
	created: function () {
		this.queryParamTree(); //查询树

		//“评分方式”查询
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "020305"
			}
		}).then((response) => {

			this.$data.countTypeArr = response.data;
		}, (response) => { });
	}
}
</script>

<style>

</style>